<template>
  <div class="customer">
    <ListTab v-if="!showMobilePage" :show-header="true" />
    <div :class="{'mobile-table mobile-pt mobile-min-height':showMobilePage}" class="table-list min-fill-page">
      <div v-if="!showMobilePage" class="table-box-title">
        <FilterInput v-model="filterInput" :filter-list="filterList" show-search-btn class="FilterTool" @handelClick="queryClick" @queryEmpty="queryEmpty" @filterTagStatus="filterTagStatus" />
        <div class="table-top-opeator-bar">
          <create-button v-if="isAdmin || hasRouteAuth('mengli:ipImage:create')" :add-name="'新建'" :create-link-name="'mengliIpImageCreate'" class="btn-right-item"/>
          <btnGroup
            v-if="hasRouteAuth('mengli:ipImage:export') || isAdmin"
            ref="btnGroupRef"
            :list="[
              {label:'导出', exportApi:'/admin/mengli/ipImage/list/export', exportName:'IP形象列表', beforeExport: exportBeforeExport, type: 'export', auth: hasRouteAuth('mengli:ipImage:export') || isAdmin},
            ]"
            style="margin-left:16px;"
          />
        </div>
      </div>
      <div v-loading="listLoading" class="table-wrap">
        <u-table
          v-if="list.items.length > 0"
          ref="ipImageListTableRef"
          :data="list.items"
          :border="false"
          :row-height="88"
          :height="setTableHeight"
          use-virtual
          class="fb-table"
          element-loading-text="加载中..."
          empty-text="暂无数据"
          header-cell-class-name="order-data-header-cell"
          fit
          hightlight-current-row>
          <u-table-column align="left" label="IP名称" min-width="145">
            <template slot-scope="scope">
              <div :class="{'light-word': scope.row.tabId}" @click="goIpDetail(scope.row)">
                <ToolTip v-if="scope.row.ipName && scope.row.ipName.length > 4" :content="scope.row.ipName" />
                <span v-else class="ellipsisOne">{{ scope.row.ipName || '--' }}</span>
              </div>
            </template>
          </u-table-column>
          <u-table-column align="left" label="封面" min-width="100">
            <template slot-scope="scope">
              <div slot="content" class="cover"> <img :src="scope.row.cover" alt="共创"></div>
            </template>
          </u-table-column>
          <u-table-column align="left" label="套数" min-width="100">
            <template slot-scope="scope">
              {{ scope.row.imageNum | moneyFilter }}
            </template>
          </u-table-column>
          <u-table-column align="left" label="发送量" min-width="100">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.sendNum">
                <div class="inner-content">{{ scope.row.sendNum | bigDataFilter }}</div>
              </ToolTip>
            </template>
          </u-table-column>
          <u-table-column align="left" label="赞赏次数" min-width="100">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.rewardNum">
                <div class="inner-content">{{ scope.row.rewardNum | bigDataFilter }}</div>
              </ToolTip>
            </template>
          </u-table-column>
          <u-table-column align="left" label="下载量" min-width="100">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.downloadNum">
                <div class="inner-content">{{ scope.row.downloadNum | bigDataFilter }}</div>
              </ToolTip>
            </template>
          </u-table-column>
          <u-table-column align="right" label="赞赏金额(元)" min-width="140">
            <template slot-scope="scope">
              <PriceColumn :real-val="scope.row.rewardPrice" :price="scope.row.rewardPrice" />
            </template>
          </u-table-column>
          <u-table-column align="left" label="表情包范围" min-width="100">
            <template slot-scope="scope">
              <div class="resource-name-container">
                <div slot="content">{{ scope.row.range | mengliEmojiRange }}</div>
              </div>
            </template>
          </u-table-column>
          <u-table-column align="left" label="供应商" min-width="120">
            <template slot-scope="scope">
              <div class="resource-name-container">
                <ToolTip :content="scope.row.supplier"/>
              </div>
            </template>
          </u-table-column>
          <u-table-column align="left" label="IP系列" min-width="120">
            <template slot-scope="scope">
              <ToolTip v-if="scope.row.ipSeriesName && scope.row.ipSeriesName.length > 4" :content="scope.row.ipSeriesName"/>
              <div v-else class="ellipsisOne">{{ scope.row.ipSeriesName || '--' }}</div>
            </template>
          </u-table-column>
          <u-table-column :fixed="showMobilePage?false:'right'" align="left" width="100" label="操作">
            <template slot-scope="scope">
              <div class="button-container">
                <div v-if="hasRouteAuth('mengli:ipImage:edit')" class="button-text" @click="toEdit(scope)">编辑</div>
                <div v-if="hasRouteAuth('mengli:ipImage:delete')" class="button-text border" @click="toDeleted(scope)">删除</div>
              </div>
            </template>
          </u-table-column>
        </u-table>
        <empty-placeholder v-else-if="!list.isInit" style="margin-bottom: 24px" />
      </div>
      <el-row v-if="showMobilePage" type="flex" justify="left">
        <el-pagination
          v-show="list.total > 0"
          :current-page="list.page"
          :page-size="list.perPage"
          :total="list.total"
          :page-sizes="[20, 50, 100, 250, 500]"
          :layout="pageLayout"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </el-row>
      <fixed-pagination>
        <template v-if="showMobilePage">
          <FilterInput
            v-model="filterInput"
            :filter-list="filterList"
            show-search-btn
            show-mobile-icon
            class="FilterTool"
            @handelClick="queryClick"
            @queryEmpty="queryEmpty"
            @filterTagStatus="filterTagStatus" />
          <MoreOpeator
            v-if="hasRouteAuth('mengli:ipImage:export')"
            ref="moreOpeatorRef"
            :list="[
              {label:'导出', exportApi:'/admin/mengli/ipImage/list/export',
               refName: 'templateExportRef',isBeforeExport: true,
               exportName:'IP形象列表', beforeExport: exportBeforeExport, type: 'export', auth: hasRouteAuth('mengli:ipImage:export') || isAdmin},
            ]"
            show-mobile-icon />
          <createBtn v-if="isAdmin || hasRouteAuth('mengli:ipImage:create')" mobile-table @click.native="createIp"/>
        </template>
        <template v-else>
          <span style="flex:1;"/>
          <el-pagination
            v-show="list.total > 0"
            :current-page="list.page"
            :page-size="list.perPage"
            :total="list.total"
            :page-sizes="[20, 50, 100, 250, 500]"
            layout="total, prev, pager, next, sizes, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </template>
      </fixed-pagination>
    </div>
  </div>
</template>

<script>
import btnGroup from '@/components/Common/baseComponent/btnGroup';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import CreateButton from '@/components/CreateButton';
import createBtn from '@/components/Common/baseComponent/createBtn';
import ExportButton from '@/components/ExportButton';
import ListTab from '@/components/ListTab';
import Title from '@/components/Title';
import { getMengliIpImageList, mengliIpImageDel } from '@/api/mengli';
import { moneyFilter, bigDataFilter } from '@/filters/number';
import { mengliEmojiRange } from '@/filters/status';
import TableAdaptive from '@/mixins/tableAdaptive';
import { hasRouteAuth } from '@/utils/permission';
import ElMessage from '@/utils/message';
import setting from '@/assets/setting.png';
import { mapState } from 'vuex';
import mobileTable from '@/mixins/mobileTable';
import { showModal } from '@/utils/message';
import MoreOpeator from '@/components/Common/baseComponent/moreOpeator';

export default {
  filters: {
    moneyFilter,
    bigDataFilter,
    mengliEmojiRange
  },
  components: {
    CreateButton,
    createBtn,
    Title,
    EmptyPlaceholder,
    ExportButton, ListTab, btnGroup, MoreOpeator
  },
  mixins: [TableAdaptive, mobileTable],
  data() {
    return {
      setting,
      filterList: [
        { keyword: 'ipName', name: 'IP名称', type: 'input' },
        { keyword: 'ipSeriesName', name: 'IP系列', type: 'input' },
        { keyword: 'supplier', name: '供应商名称', type: 'input' }
      ],
      filterInput: {},
      list: {
        items: [],
        page: 1,
        perPage: 20,
        total: 0,
        isInit: true,
        totalAmount: '',
        amount: {}
      },
      perPage: 20,
      listLoading: true,
      page: 1
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo,
      'opened': state => state.app.sidebar.opened
    }),
    isAdmin() {
      return this.userInfo.userName === '管理员';
    },
    tableOutsideHeight() {
      return this.showMobilePage ? 158 : 188;
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    hasRouteAuth,
    fetchData() {
      if (!this.$route.meta.isChange) {
        this.queryEmpty();
      } else {
        this.getMengliIpImageList(this.list && this.list.items && this.list.items.length === 0);
      }
    },
    async getMengliIpImageList(reset = false) {
      try {
        const { page, perPage, filterInput: { ipName, ipSeriesName, supplier }} = this;
        if (reset) this.page = 1;
        const params = {
          page,
          perPage,
          ipName,
          ipSeriesName,
          supplier
        };
        this.listLoading = true;
        const res = await getMengliIpImageList(params);
        const { data = {}} = res;
        this.list = data;
        this.list.isInit = false;
        this.listLoading = false;
      } catch (err) {
        this.listLoading = false;
        console.error(err);
      }
    },
    queryClick() {
      this.getMengliIpImageList(true);
    },
    queryEmpty() {
      this.filterInput = {};
      this.queryClick();
    },
    exportBeforeExport() {
      const { page, perPage, filterInput: { ipName, ipSeriesName, supplier }} = this;
      const params = {
        page,
        perPage,
        ipName,
        ipSeriesName,
        supplier
      };
      if (!this.showMobilePage && this.$refs.btnGroupRef) {
        this.$refs.btnGroupRef.btnExport(params);
      }
      if (this.showMobilePage && this.$refs.moreOpeatorRef) {
        this.$refs.moreOpeatorRef.btnExport(params, 'templateExportRef');
      }
    },
    toEdit(scope) {
      this.$router.push({
        name: 'mengliIpImageEdit',
        query: { ipId: scope.row.ipId }
      });
    },
    createIp() {
      this.$router.push({
        name: 'mengliIpImageCreate'
      });
    },
    toDeleted(scope) {
      const ipId = scope.row.ipId;
      showModal('是否确定删除该IP形象', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true,
        type: 'warning',
        customClass: ' del-message del-message-cancel',
        iconClass: 'del-icon'
      }).then(() => {
        mengliIpImageDel({ ipId }).then(res => {
          const { code, message } = res;
          if (code === 501) {
            this.$message.error(message);
            return false;
          }
          this.$message.success('删除成功');
          this.getMengliIpImageList();
        }).catch(err => {
          // const { message = '出错啦，请再次尝试。' } = err;
          // this.$message.error(message);
          console.error(err);
        });
      }).catch(() => {});
    },
    handleSizeChange(val) {
      this.perPage = val;
      this.getMengliIpImageList(true);
      this.$nextTick(() => {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      });
    },
    handleCurrentChange(toPage) {
      this.page = toPage;
      this.getMengliIpImageList();
      this.$nextTick(() => {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      });
    },
    goIpDetail(rowData) {
      if (!rowData.tabId) return;
      if (hasRouteAuth('mengli:list:read')) {
        const routeUrl = this.$router.resolve({
          name: 'mengliDetail',
          params: { id: rowData.ipId },
          query: { workId: rowData.tabId }
        });
        window.open(routeUrl.href, '_blank');
      } else {
        ElMessage.warning('暂无表情包可读权限，请联系管理员开通');
      }
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.customer {
  .table-list {
    margin: 16px 16px 0 16px;
    background-color: #fff;
    padding: 20px 24px 55px 24px;
    .table-box-title {
      position: relative;
      margin-bottom: 16px;
      .btn-right {
        display: flex;
        align-items: center;
        .btn-right-item {
          margin-left: 16px;
        }
      }
    }
  }
  & ::v-deep {
    .pointer {
      cursor: pointer;
    }
  }
}
.dropdown-btn-item{
  width: 100px;
  text-align: center;
}

.resource-name-container {
  display: flex;
  .resource-name {
    display: inline-block;
    width: 140px;
    color: #406EFF;
  }
}
.button-container {
  display: flex;
  .border {
    display: block;
    padding-left:6px;
    margin-left: 6px;
    position: relative;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -7px;
      width: 1px;
      background: #ddd;
      height: 14px;
    }
  }
}
.cover {
  width: 60px;
  height: 60px;
  img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}
.dropdown-wrap {
  margin-top: -24px;
  margin-right: 15px;
  padding: 0;
}
.table-wrap {
  min-height: 300px;
}
.max-width-200 {
  max-width: 200px;
}
.light-word {
  cursor: pointer;
  color: #406EFF;
}
</style>

